<template>
    <!-- <el-dialog v-model="visible" ref="data" :title="data? '编辑':'新增用户'" width="33%"  draggable> -->

    <el-dialog v-model="visible" class="dialog-form" :title="'编辑'" width="40%" draggable>
        <el-form :model="formData" style="margin: 0 20px;" ref="form">
            <el-form-item label="序号" :label-width="80" prop="id">
                <el-input v-model.number="formData.id" />
            </el-form-item>
            <el-form-item label="姓名" :label-width="80" prop="name">
                <el-input v-model="formData.name" />
            </el-form-item>
            <el-form-item label="电话" :label-width="80" prop="tel">
                <el-input v-model="formData.tel" />
            </el-form-item>
            <el-form-item label="角色" :label-width="80" prop="player">
                <el-input v-model="formData.player" />
            </el-form-item>
            <el-form-item label="上级人员" :label-width="80" prop="top">
                <el-input v-model="formData.top" disabled="true" />
            </el-form-item>
            <el-form-item label="负责地块" :label-width="80" prop="soil">
                <el-select v-model="formData.soil" placeholder="请选择" multiple class="transparent-select">
                    <el-option label="地块1" value="地块1" />
                    <el-option label="地块2" value="地块2" />
                    <el-option label="地块3" value="地块3" />
                </el-select>
            </el-form-item>
            <el-form-item label="最近登录时间" :label-width="100" prop="time">
                <el-input v-model="formData.time" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="setHandler">重置</el-button>
                <!-- <el-button type="primary" @click="submitHandler"> {{ data? "保存":"添加" }} </el-button> -->
                <el-button type="primary" @click="submitHandler"> 保存 </el-button>
            </span>
        </template>
    </el-dialog>

</template>

<script lang='ts' setup>
import type { IPeople } from '@/interface/IPeople'
import { usePeopleStore } from '@/stores/PeopleStore'
import { reactive, ref, watch } from 'vue'

const visible = defineModel({ required: true })
const emits = defineEmits(['editInfo'])
const form = ref()
const { data } = defineProps(['data'])
const originFormData = {
    id: 0,
    name: '',
    time: '',
    player: '',
    top: '',
    soil: '',
    tel: 12345678901,
}
const formData = reactive({ ...originFormData })

// const stores = usePeopleStore()
// console.log(stores.token)
// 对传入的数据data做侦听 如果数据存在是编辑
watch(() => data, (value: IPeople | null) => {
    // console.log(value)
    // 当点击编辑按钮时,如果数据存在,将存在的值合并给表单
    if (value) {
        Object.assign(formData, value)
    }
})
// 点击提交表单时,即提交编辑后的数据
const submitHandler = () => {
    emits('editInfo', formData)
    visible.value = false
}
// 重置表单
const setHandler = () => {
    console.log(form)
    if (!form.value) return
    form.value.resetFields()
    Object.assign(formData, originFormData)
}

// 11111111111111
</script>

<style lang='scss' scoped></style>